<!--
 * @Author: WLang
 * @LastEditors: WLang
 * @Description: 
 * @Date: 2023-07-25 14:04:23
 * @LastEditTime: 2023-07-26 12:47:24
 * @FilePath: \my-wyy\src\components\Home\RecommendMusic.vue
-->
<template>
  <div class="wyy-recommend">
    <h3 class="wyy-recommend-title">编辑推荐</h3>
    <ul class="wyy-recommend-list">
        <li class="wyy-recommend-item" v-for="item in props.songList" :key="item.id">
          <router-link :to="{name:'playlist', query: {id: item.id}}">
            <van-image width="122px" height="122px" :src="item.picUrl"/>
            <p class="wyy-recommend-desc">{{item.name}}</p>
          </router-link>
        </li>
    </ul>
    <h3 class="wyy-recommend-title">最新音乐</h3>
      <ul class="wyy-recommend-newSong">
        <li v-for="item in newSongList" :key="item.id">
          <router-link :to="{name: 'song', query: {id: item.id}}">
            <MusicItem :songData="songData(item)"/>
          </router-link>
        </li>
      </ul>
    <div class="wyy-recommend-footer">
      <svg-icon iconName="footerlogo" class="footerlogo"/>
      <span class="wyy-footer-btn">打开APP， 发现更多好音乐 ></span>
      <span class="wyy-footer-copyright">网易公司版权所有&copy;1997-2023 杭州乐读科技有限公司</span>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue';
import SvgIcon from '../svgIcon.vue'
import MusicItem from '../MusicItem.vue';
 const props = defineProps({
    songList: {
      type: Array,
      defalut: () => []
    },
    newSongList: {
      type: Array,
      defalut: () => []
    }
  })
  const songData = computed(() => {
    return (item) => {
      return {
        id: item.id,
        name: item.name,
        alias: item.song.alias.length ? item.song.alias[0] : '',
        sqMusic: item.song.sqMusic ?? false,
        musicInfo: `${item.song.artists[0].name} - ${item.name}`
      }
    }
  })
</script>
<style lang="scss" scoped>
  .wyy-recommend {
    margin-top: 20px;
    position: relative;
    height: 16px;
    line-height: 16px;
    .wyy-recommend-title {
      position: relative;
      font-size: 16px;
      color: #3d3e36;
      margin-left: 12px;
      margin-bottom: 16px;
      &:before {
        content: '';
        position: absolute;
        left: -8px;
        top: 50%;
        transform: translateY(-50%);
        width: 3px;
        height: 16px;
        background-color: #d43e33;
      }
    }
    .wyy-recommend-list {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      .wyy-recommend-item {
        width: calc((100% - 4px) / 3);
        a {
          color: #3d3e36;
        }
      }
      .wyy-recommend-desc {
        box-sizing: border-box;
        padding: 5px;
        height: 38px;
        font-size: 14px;
        display: -webkit-box;
        -webkit-box-orient:vertical;
        -webkit-line-clamp:2;
        overflow: hidden;
        margin-bottom: 14px;
      }
    }
    .wyy-recommend-footer {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: 200px;
      background: url(../../assets/images/recommand_bg_2x.png) no-repeat center/cover;
      .footerlogo {
        display: block;
        margin: 0 auto;
        width: 230px;
        height: 44px;
      }
      .wyy-footer-btn {
        display: block;
        margin: 0 auto;
        width: 300px;
        height: 40px;
        border: 1px solid #de7872;
        border-radius: 24px;
        font-size: 16px;
        line-height: 40px;
        text-align: center;
        color: #e03a3b;
        margin-top: 14px;
      }

      .wyy-footer-copyright {
        margin-top: 10px;
        font-size: 12px;
      }
    }
  }
</style>